<template>
  <div class="rule-card">
    <div class="card-top">
      <i class="el-icon-edit" @click="edit"></i>
      <el-popover
        placement="bottom"
        width="80"
        trigger="hover"
        popper-class="rule-card-popover"
      >
        <div
          class="operate"
          v-for="item in operates"
          :key="item.value"
          @click="$emit('operateClick', ruleDetail, item.value)"
        >
          {{ item.label }}
        </div>
        <i class="el-icon-more" slot="reference"></i>
      </el-popover>
    </div>
    <div class="card-content">
      <h2 :class="ruleDetail.status ? 'published' : 'draft'">
        {{ ruleDetail.process_rule_name }}
      </h2>
      <div class="content-item">
        <span>code: </span>
        <span>{{ ruleDetail.process_rule_code ?? "--" }}</span>
      </div>
      <div class="content-item">
        <span>描述: </span>
        <span>{{ ruleDetail.describe ?? "--" }}</span>
      </div>
      <div class="content-item">
        <span>创建人: </span>
        <show-person :personInfo="ruleDetail.creator" />
        <span>/{{ ruleDetail.create_time }}</span>
      </div>
      <div class="content-item">
        <span>更新人: </span>
        <show-person :personInfo="ruleDetail.updater" />
        <span>/{{ ruleDetail.update_time }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import ShowPerson from "../public/showPerson.vue";
export default {
  name: "ruleCard",
  props: ["ruleDetail"],
  components: { ShowPerson },
  data() {
    return {
      operates: [
        {
          label: "删除",
          value: "delete",
        },
        {
          label: "查看",
          value: "view",
        },
        {
          label: "重命名",
          value: "reName",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    edit() {
      this.$router.push({
        name: "ruleEdit",
        params: {
          process_rule_code: this.ruleDetail.process_rule_code,
          ifEdit: true,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.rule-card {
  border-radius: 10px;
  background-color: #fff;
  padding: 12px 20px;
  box-sizing: content-box;
  max-height: 320px;
  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .card-top {
    display: flex;
    justify-content: flex-end;
    i {
      padding: 4px 3px 2px 3px;
      border: 1px solid #dee0e3;
      color: #8f959e;
      border-radius: 6px;
      margin-left: 10px;
      cursor: pointer;
      &:hover {
        color: #4c78fc;
        border-color: #4c78fc;
      }
    }
  }
  .card-content {
    font-size: 14px;
    h2 {
      font-size: 16px;
      padding-left: 20px;
      margin-bottom: 20px;
    }
    h2.published,
    h2.draft {
      position: relative;
      &::before {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #5abb3c;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      &.draft {
        margin: 0;
        &::before {
          background-color: #bbbfc4;
        }
      }
    }
    .content-item {
      display: flex;
      align-items: center;
      margin: 10px 0;
      span:first-child {
        color: #8f959e;
        margin-right: 10px;
      }
    }
  }
}
</style>
<style lang="less">
.rule-card-popover {
  padding: 10px 0;
  min-width: 80px;
  .operate {
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    &:hover {
      background-color: #f5f6f7;
    }
  }
}
</style>
